<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>富文本编辑器</title>
  <link rel="stylesheet" href="./css/style.css" />
  <link rel="stylesheet" href="./lib/iconfont.css" />
</head>

<body>
  <div id="app">
    <rich-editor :options="options" v-model:value="content"></rich-editor>
    <button check @click="check"></button>
  </div>

  <script src="./lib/vue@next.js"></script>
  <script src="./js/config.js"></script>
  <script src="./js/RichEditor.js"></script>

  <script>
    Object.assign(window, Vue); // 检测需要请勿删除
    const { ref, onMounted, reactive, toRefs, watch } = Vue;

    const app = Vue.createApp({
      setup() {

        var options = ref({
          toolbar: [
            ['bold', 'italic'],
            'underline',  
            [{ header: [1, 2, false, 3, 4] }],
            [{ fontname: ['serif', 'cursive', 'Monospace'] }],
            ['color', 'background'],
            [{ align: ['left', 'right', 'center'] }],
            'image',
            'link',
            ['redo', 'undo']
          ],
          placeholder: 'Insert text here ...',
          readOnly: false
        });

        const content = ref(
          '<div style="text-align: center;"><font size="5"><b>标题</b></font></div><br><div style="text-align: left;"><p><b>TODO：</b>完善富文本编辑器功能、实现按指定数据格式配置toolbar</p></div>'
        );

        function check() {
          let base = options.value
          options.value = []
          setTimeout(() => {
            options.value = {
              toolbar: {}
            }
            setTimeout(() => {
              options.value = base
            }, 50);
          }, 50)
        }
        return {
          options,
          content,
          check
        }
      }
    });

    app.component('rich-editor', RichEditor)
    app.mount('#app');
  </script>
</body>

</html>